<template>
	<div class="main">
		<div class="main-header" style="justify-content: space-between">
			<!-- <el-button
                v-for="(item, index) in buttons"
                :key="index"
                :type="item.path | formatType"
                :icon="item.icon"
                :disabled="item.path | formatDisabled(selection)"
                @click="tapButton(item)"
                >{{ item.title }}</el-button
            > -->
			<div style="display: flex">
				<el-input placeholder="请输入内容" style="width: 200px; margin-right: 10px" v-model="searchParamCp.keyword" size="mini" clearable> </el-input>
				<shequSelect size="mini" style="width: 180px; margin-right: 10px" v-model="searchParamCp.community_id"></shequSelect>
				<el-select v-model="searchParamCp.pay_status" size="mini" placeholder="请选择支付状态" style="width: 200px; margin-right: 10px">
					<el-option v-for="item in paylist" :key="item.id" :label="item.label" :value="item.id"> </el-option>
				</el-select>
				<el-select v-model="searchParamCp.status" size="mini" placeholder="请选择订单状态" style="width: 200px; margin-right: 10px">
					<el-option v-for="(item, index) in $store.getters.order_status" :key="item" :label="item" :value="index"> </el-option>
				</el-select>
				<div class="timepick">
					<el-date-picker clearable v-model="searchParamCp.search_time" value-format="yyyy-MM-dd" size="mini" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
				</div>
				<el-button type="primary" size="mini" @click="searchs()">搜索</el-button>
				<el-button size="mini" @click="reset()">重置</el-button>
			</div>
			<div>
				<!-- <div class="main-header" v-if="buttons.length">
					<el-button v-for="(item, index) in buttons" :key="index" :type="item.path | formatType"
						:icon="item.icon" :disabled="item.path | formatDisabled(selection)" @click="tapButton(item)">{{
							item.title }}</el-button>
				</div> -->
				<el-button type="primary" size="mini" @click="exportExcel">导出</el-button>
			</div>
		</div>
		<el-table ref="table" v-if="memberData.length" show-summary :summary-method="getSummaries" class="main-table" :data="memberData" height="100%" border header-cell-class-name="main-table-header" @selection-change="onSelectionChange">
			<el-table-column type="selection" width="39"></el-table-column>
			<el-table-column align="center" label="会员昵称" prop="wxName" />
			<el-table-column align="center" label="订单号" prop="order_sn" width="180px" />
			<el-table-column width="120px" align="center" label="电话号码" prop="phoneNumber" />
			<el-table-column align="center" width="120px" label="订单总金额" prop="total_money" />
			<!-- <el-table-column align="center" width="100px" label="运费" prop="freight_money" /> -->
			<el-table-column align="center" label="支付金额" prop="pay_money" width="120px" />
			<el-table-column align="center" label="自提社区" prop="community_name" />
			<el-table-column align="center" label="下单时间" prop="addtime" width="180px">
				<template slot-scope="{ row }">
					{{ row.addtime | formatDate }}
				</template>
			</el-table-column>
			<el-table-column align="center" label="支付时间" prop="pay_time" width="180px">
				<template slot-scope="{ row }">
					{{ row.pay_time | formatDate }}
				</template>
			</el-table-column>
			<el-table-column align="center" label="退款时间" width="180px">
				<template slot-scope="{ row }">
					<div v-if="row.complete_time">
						{{ row.complete_time }}
					</div>
				</template>
			</el-table-column>
			<el-table-column align="center" label="订单状态" prop="status" width="120px">
				<template slot-scope="{ row }">
					<!-- //发货订单状态 0待付款 1待发货/待自提 2待收货/已自提 3待评价 4已取消 5售后退款中 6已完成 7售后完成 -->
					<!-- order_status -->
					<el-tag v-if="row.status == 0">待付款</el-tag>
					<el-tag v-if="row.status == 1" type="success">待自提</el-tag>
					<el-tag v-if="row.status == 2" type="success">已自提</el-tag>
					<el-tag v-if="row.status == 3" type="info">待评价</el-tag>
					<el-tag v-if="row.status == 4" type="warning">已取消</el-tag>
					<el-tag v-if="row.status == 5" type="warning">售后退款中</el-tag>
					<el-tag v-if="row.status == 6" type="danger">已完成</el-tag>
					<el-tag v-if="row.status == 7">售后已完成</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="订单类型" prop="delivery_method" width="120px">
				<template slot-scope="{ row }">
					<!-- //delivery_method =1配送订单delivery_method =2自提订单-->
					<!-- order_type 1 商城购买  2积分兑换 -->
					<el-tag v-if="row.order_type == 1">商城购买</el-tag>
					<el-tag v-if="row.order_type == 2" type="success">积分兑换</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="支付状态" prop="pay_status" width="120px">
				<template slot-scope="{ row }">
					<!-- // 0未支付 1已支付 -->
					<el-tag v-if="row.pay_status == 1" type="success">已支付</el-tag>
					<el-tag v-if="row.pay_status == 0" type="warning">未支付</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" width="120px">
				<template slot-scope="{ row }">
					<el-button type="primary" @click="onCheck(row)">详情</el-button>
					<!-- <el-button type="primary" :disabled="row.delivery_method!==2&&row.pay_status==1&&row.status==1?false:true" @click="sentgoods(row)">发货</el-button> -->
				</template>
			</el-table-column>
		</el-table>
		<el-pagination class="main-pagination" :current-page.sync="page" :page-size="limit" :total="total" @current-change="onCurrentChange" layout="total,jumper,prev,pager,next,total"></el-pagination>
		<el-dialog :visible.sync="dialogVisible" :title="dialogTitle" append-to-body width="800px" v-if="dialogVisible" @close="onDialogClose">
			<component :is="dialogView" @update="getMemberData" @search="search" :id="orderid" @send="send"></component>
		</el-dialog>
		<!-- <Info ref="info" :formData="orderinfo" @close="onDialogClose" /> -->
	</div>
</template>

<script>
import { get, post } from "@/assets/js/http.js"
import { Result } from "element-ui"
import shequSelect from "@/components/shequ-select.vue"

export default {
	components: { shequSelect },
	name: "view-member",
	data() {
		return {
			memberData: [],
			selection: [],
			page: 1,
			limit: 20,
			total: 0,
			dialogVisible: false,
			dialogTitle: "",
			dialogView: "",
			searchinfo: {
				keyword: "",
				search_time: [],
				status: "",
				pay_status: "",
			},
			searchParamCp: {},
			paylist: [
				{
					id: 0,
					label: "未支付",
				},
				{
					id: 1,
					label: "已支付",
				},
			], // 0未支付 1已支付
			typelist: [
				{
					id: 0,
					label: "待付款",
				},
				{
					id: 1,
					label: "待发货",
				},
				{
					id: 2,
					label: "待收货",
				},
				{
					id: 3,
					label: "待评价",
				},
				{
					id: 4,
					label: "已取消",
				},
				{
					id: 5,
					label: "售后退款中",
				},
				{
					id: 6,
					label: "已完成",
				},
				{
					id: 7,
					label: "售后完成",
				},
			], //0待付款 1待发货 2待收货 3待评价 4已取消 5售后退款中 6已完成 7售后完成
			orderid: "", //订单详情
			resAll: null,
		}
	},
	computed: {
		buttons() {
			return this.$store.state.buttons
		},
	},
	components: {
		Sent: () => import("./sent.vue"),
		Search: () => import("./search.vue"),
		Info: () => import("./info.vue"),
		shequSelect,
	},
	mounted() {
		this.getMemberData()
	},
	methods: {
		getSummaries(param) {
			const { columns, data } = param
			const sums = []
			columns.forEach((column, index) => {
				if (index == 4) {
					sums[index] = "合计：" + this.resAll.total_money
				}
				if (index == 5) {
					sums[index] = "合计：" + this.resAll.pay_money
				}
			})

			return sums
		},
		search(result) {
			this.page = 1
			console.log(result)
		},
		searchs() {
			this.page = 1
			this.searchinfo = {
				...this.searchinfo,
				...this.searchParamCp,
			}
			this.getMemberData()
		},
		//发货
		send(result) {
			const data = {
				id: result.id,
				take_num: result.take_num,
				ship_id: result.ship_id,
			}
			post({
				url: "/admin/order.Order/shipPost",
				data,
				successTip: true,
			}).then((res) => {
				this.getMemberData()
			})
		},
		reset() {
			this.page = 1
			this.searchParamCp = {}
			;(this.searchinfo = {
				keyword: "",
				search_time: [],
				status: "",
				pay_status: "",
			}),
				this.getMemberData()
		},
		async getMemberData() {
			const data = await get({
				url: "/admin/order.Order/index",
				loading: true,
				params: {
					page: this.page,
					limit: this.limit,
					...this.searchinfo,
					...{
						search_time: this.searchinfo.search_time.length ? this.searchinfo.search_time.join(" - ") : "",
					},
				},
			})
			const list = data.list.list
			this.total = data.total
			list.forEach((item) => {
				item.firstCostDate = item.firstCostDate?.slice(0, 10)
				item.latestCostDate = item.latestCostDate?.slice(0, 10)
			})
			this.memberData = list
			this.resAll = data.list
		},
		//导出
		async exportExcel() {
			this.$loading()
			let res = await get({
				export: true,
				url: "/admin/order.Order/export",
				params: {
					...this.searchinfo,
					...{
						search_time: this.searchinfo.search_time && this.searchinfo.search_time.length ? this.searchinfo.search_time.join(" - ") : "",
					},
				},
			})
			let a = document.createElement("a")
			var url = URL.createObjectURL(res)
			a.href = url
			a.click()
			this.$loading().close()
		},
		onCurrentChange(index) {
			this.page = index
			this.getMemberData()
		},
		//详情
		onCheck(row) {
			// this.dialogTitle = "查看客户照片";
			// this.dialogView = "Photo";
			// this.dialogView = "Info";
			// this.dialogVisible = true;
			this.orderid = row.id
			this.dialogVisible = true
			this.dialogView = "Search"
		},
		sentgoods(row) {
			this.orderid = row.id
			this.dialogView = "Sent"
			this.dialogVisible = true
		},
		onSearch() {
			this.dialogTitle = "搜索"
			this.dialogView = "Search"
			this.dialogVisible = true
		},
		onSelectionChange(selection) {
			this.selection = selection
		},
		onRowClick(row) {
			this.$refs.table.toggleRowSelection(row)
			this.$refs.info.show()
		},
		onDialogClose() {
			this.$refs.table.clearSelection()
		},
		tapButton(item) {
			if (item.path === "export") {
				this.exportExcel()
			} else if (item.path === "search") {
				this.onSearch()
			}
		},
	},
}
</script>
<style>
.timepick {
	width: 360px;
	margin-right: 10px;
}
</style>
